<template>
	<view class="main-view">
		<view v-if="errmsg==''" class="content-view">
			<view v-if="filter_column != ''">
				<view style="display: flex;flex-direction: row;align-items: center;background-color: #fff;">
					<view style="background-color: #ccc; vertical-align: middle;padding:5px;margin: 0px 3px; border-radius: 5px;display: flex;align-items: center;flex: 1; ">
						<text class="iconfont icon-chazhao" style="padding-right: 5px;color: #eee;"></text>
						<input @confirm="inputheadblur(0,$event)" :value="filterConditions[0].value"  confirm-type="search" type="text" :placeholder="item.placeholder" placeholder-style="font-size:14px;color:#eee;"  style="outline-color: invert;flex:1; outline-style: none;outline-width: 0px;border: none;border-style: none;text-shadow: none; -webkit-appearance: none;-webkit-user-select: text;outline-color: transparent;box-shadow: none;outline: none;border-radius: 0;"/>
					</view>
					<view @click="navitoscan(0)" class="iconfont icon-saomiao" style="color: #fd6137;padding: 5px; margin-right: 5px; font-size: 18px;display: flex;align-items: center;"></view>
				</view>
				<view style="height: 1px;width: 100%;background-color: #f0f0f0;"></view>
			</view>
			
			<scroll-view @scrolltolower="loadmore" :style="{'height':marginheight+'px'}" style=" width: 100vw;background-color: #f0f0f0;" scroll-y="true" >
				<block  :key="index" v-for="(item, index) in datalist">
				<view   :style="{ right: item.right + 'rpx'}"  style="margin: 10px 5px 0 5px;padding:0 10px; background-color: #fff;display: flex;position: relative;"  class="order-item" :data-index="index">
					<view @click="selectitem(index)" style="display: flex;flex-direction: column;width: calc(100vw - 30px); ">
						<view  v-for="(item1, index1) in item" :key="index1" style="width: calc(100vw - 30px);">
						   <view v-if="item1.style.colVisible" style="color: #666;font-size: 14px; display: flex;flex-direction: row;align-items: center;padding: 5px 0;">
							   <view >{{item1.style.colText}}:</view>
								<view style="border-radius: 5px;padding: 2px 5px;">{{item1.style.colValue}}</view>
						   </view>
						   <view v-if="index1!=(item.length-1) && item1.style.colVisible" style="height: 1px;width: 100%;background-color: #f0f0f0;"></view>
					   </view>
					</view>
					<view style="position: absolute;right: 20px;top:10px;" v-if="multiselect == 1">
						<view class="iconfont icon-xuanzhongduigou" :style="{color:item[selectedindex].style.value==1?'#f00':'#aaa'}" style="font-size: 28px;"  ></view>
					</view>
				</view>
			</block>
			</scroll-view>
			<view class="bottom-wrapper"  style="">
				<view v-if="btns.length==1 && multiselect==1" class="bottom-view">
					<view @click="btnclick('')"  class="bottom-btn">{{btns[0].btnText}}</view>
				</view>
				<view v-else class="bottom-view">
					<view @click="btnclick('cancel')" class="bottom-btn">{{btns2[0].btnText}}</view>
				</view>
			</view>
			
		</view>
		<view v-else class="error-view">
			{{errmsg}}
		</view>
	</view>
</template>

<script>
var util = require("../../utils/util.js");
const app = getApp().globalData;
export default {
	data() {
		return {
			errmsg:'',
			headerList:[],
			red:'#f00',
			datalist:[],
			marginheight:800,
			pageName:'',
			templetName:'',
			modid:'',
			menuid:'',
			divArea:'',
			ismask:false,
			layerheight:0,
			layerheightmargin:0,
			clientHeight:0,
			layercontent:{},
			conditions:{},
			replaceConditions:{},
			conditionsname:'',
			div:[],
			filter_column:'',
			filterConditions:[],
			datastyle:[],
			colName:'',
			childDataObject:'',
			pageConditions:{},
			isloading:true,
			pageConditions : {'pageNumber':1,'rowsPerPage':20,'isAllData':false},
			index:0,
			listindex:0,
			conditions:[],
			itemchanged:'',
			multiselect:'',
			selectedindex:0,
			dataColumn:'',
			displayColumn:'',
			divArea:'',
			btns:[{"name": "save","text": "确认","btnText":"确认","type": "save",
				"visible": true,"btnToDo": "save","clicked": {}}],
			btns2:[{"name": "save","text": "取消选择","btnText":"取消选择","type": "save",
					"visible": true,"btnToDo": "save","clicked": {}}],
			enObj:{'toastTitle':'No more data available'},
			cnObj:{'toastTitle':'没有更多数据了'}
					
		}
	},
	
	onLoad:function(options){
		var that = this
		
		wx.getSystemInfo({
		  success: function (res) {
			let clientHeight = res.windowHeight;
			console.log(clientHeight)
			that.marginheight = clientHeight - 50
		  }
		});
		
		let i18nArr = uni.getStorageSync('i18nArr')
		let i18n = uni.getStorageSync('i18n')
		if(i18n === 'en' && i18nArr!=undefined){
			this.btns[0].btnText = this.$translg(this.btns[0].btnText, i18nArr)
			this.btns2[0].btnText = this.$translg(this.btns2[0].btnText, i18nArr)
			this.cnObj = this.enObj
		}
		that.listindex = options.listindex?options.listindex:0
		that.index = options.index?options.index:0
		var divArea =  options.divArea?options.divArea:''
		that.divArea = divArea
		console.log(options)
		that.conditions = options.conditions
		that.replaceConditions = options.replaceConditions
		that.itemchanged = options.itemchanged
		var dataColumn = options.dataColumn
		var displayColumn = options.displayColumn
		that.dataColumn = dataColumn 
		that.displayColumn = displayColumn
		var childDataObject = options.childDataObject
		var colName = options.colName
		var filter_column = options.filter_column
		var multiselect = options.multiselect
		that.colName = colName
		that.childDataObject = childDataObject
		that.filter_column = filter_column
		that.multiselect = multiselect
		
		try{
		var options2 = JSON.parse(options.jsonoptions)
		}catch(e){}
		console.log(options2)
		var productCode = uni.getStorageSync('productCode')
		var sessionId = uni.getStorageSync('sessionId')
		var projectCode = uni.getStorageSync('projectCode')
		var terminaltype = uni.getStorageSync('terminaltype')
		var dbId = uni.getStorageSync('dbId')
		var userId = uni.getStorageSync('userId')
		var userName = uni.getStorageSync('userName')
		var pageName = options2.pagename
		var templetName = options2.templetname
		var modid = options2.modid
		var menuid = options2.menuid
		
		that.pageName = pageName
		that.templetName = templetName
		that.modid = modid
		that.menuid  = menuid
		uni.setNavigationBarTitle({title:options2.menuname})
		var injson = that.$requestPageDivChildStyle(options2, divArea, childDataObject, colName)
		console.log(injson)
		uni.request({
			url: getApp().globalData.app_address + '?method=saas_PageDivChildStyle&parse=json',
			data: injson,
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			success: function(res) {
				var result = res.data;
				console.log(result)
				uni.hideLoading()
				var datastyle = result.data.style.colStyle
				that.datastyle = datastyle

				var pageConditions = that.pageConditions
				
				
				var filterConditions = []
				if(that.filter_column != ''){
					var filterobj = {}
					filterobj['column'] = that.filter_column
					filterobj['value'] = ''
					filterConditions.push(filterobj)
				}
				that.filterConditions = filterConditions
				var injson2 = that.$requestPageDivChildData(options2, divArea, that.childDataObject, that.colName, filterConditions,that.conditions,that.replaceConditions,pageConditions)
				console.log(injson2)
				uni.request({
					url: getApp().globalData.app_address + '?method=saas_PageDivChildData&parse=json',
					data: injson2,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						var result = res.data;
						console.log(result)
						var datalisttemp = result.data.div.value
						if(JSON.stringify(datalisttemp) != '[]' && datalisttemp.length >= pageConditions.rowsPerPage){
							pageConditions.pageNumber += 1
							that.pageConditions = pageConditions
						}else{
							pageConditions.pageNumber = 0
							that.pageConditions = pageConditions
						}
						var datalist = []
						var DataObjectExtData = uni.getStorageSync('DataObjectExtData')
						for(var k=0; k<datalisttemp.length; k++){
							for(var m=0; m<datastyle.length; m++){
								datastyle[m].style['value'] = datalisttemp[k][datastyle[m].name]
								datastyle[m].style['colValue'] = datalisttemp[k][datastyle[m].name]
								if(datastyle[m].name == 'selected'){
									that.selectedindex = m
								}
								if( datastyle[m].style.editStyle == 'dddw'){
									for(var o=0; o<DataObjectExtData.length;o++){
										if(DataObjectExtData[o].dataobjectname == datastyle[m].style.tag_dddwName && DataObjectExtData[o].coldata == datastyle[m].style.value){
											datastyle[m].style.colValue = DataObjectExtData[o].coldisplay
										}
										
									}
								}else if(datastyle[m].style.editStyle == 'ddlb'){
									var codeTable = datastyle[m].style.codeTable
									for(var o=0; o<codeTable.length;o++){
										for(var p=0;p<datastyle.length;p++){
											if(codeTable[o].dataValue == datastyle[m].style.value){
												datastyle[m].style.colValue = codeTable[o].displayValue
											}
										}
									}
								}
							}
							
							
							datalist.push(JSON.parse(JSON.stringify(datastyle)) )
						}
						that.datalist = datalist	
					},
				})
				wx.getSystemInfo({
				  success: function (res) {
					let clientHeight = res.windowHeight;
					that.clientHeight = clientHeight
				  }
				});
			},
		})
		
	},
	
	methods:{
		
		btnclick(type){
			var that = this
			var datalist = that.datalist
			var itemcol = ''
			var displayitemcol = ''
			var dataColumn = that.dataColumn
			var displayColumn = that.displayColumn
			for(var i=0; i<datalist.length; i++){
				var item = datalist[i]
				var selected = 0
				var itemcoltemp = ''
				var displayitemcoltemp = ''
				for(var j=0; j<item.length; j++){
					var itemname = item[j].name
					if(itemname == dataColumn){
						itemcoltemp = item[j].style.value
					}
					if(itemname == displayColumn){
						displayitemcoltemp = item[j].style.value
					}
					if(itemname == 'selected'){
						selected = item[j].style.value
					}
				}
				if(selected == 1){
					itemcol += itemcoltemp + ','
					displayitemcol += displayitemcoltemp + ','
				}
			}
			var selitem = that.datalist[0]
			if(type == 'cancel'){
				selitem.forEach((val)=>{
					val.style.value = ''
				})
				
			}else{
				if(itemcol === '')return
				for(var k=0;k<selitem.length; k++){
					var itemname = selitem[k].name
					if(itemname == dataColumn){
						selitem[k].style.value = itemcol.substring(0, itemcol.length-1)
					}
					if(itemname == displayColumn){
						selitem[k].style.value = displayitemcol.substring(0, displayitemcol.length-1)
					}
				}
			}
			
			let pages = getCurrentPages();
			let beforePage = pages[pages.length - 2];
			beforePage.$vm.updatedddwlistvalue(selitem,that.listindex,that.index,that.itemchanged);
			uni.navigateBack({delta: 1})
		},
		
		selectitem(index){
			var that = this
			var datalist = that.datalist
			var item = datalist[index]
			if(that.multiselect != 1){
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.updatedddwlistvalue(item,that.listindex, that.index,that.itemchanged,that.divArea);
				uni.navigateBack({delta: 1})
			}else{
				var itemvalue = item[that.selectedindex].style.value
				if(itemvalue == 0){
					itemvalue = 1
				}else if(itemvalue == 1){
					itemvalue = 0
				}
				item[that.selectedindex].style.value = itemvalue
				datalist[index] = item
				that.datalist = datalist
			}
			
		},
		
		loadmore(){
			var that = this
			var pageConditions = that.pageConditions
			var pageNumber = pageConditions.pageNumber
			if(pageNumber == 0){
				uni.showToast({title:that.cnObj.toastTitle})
				return
			}
			
			var isloading = that.isloading
			if(isloading){
				that.isloading = false
				var filterConditions = that.filterConditions
				var productCode = uni.getStorageSync('productCode')
				var sessionId = uni.getStorageSync('sessionId')
				var projectCode = uni.getStorageSync('projectCode')
				var terminaltype = uni.getStorageSync('terminaltype')
				var dbId = uni.getStorageSync('dbId')
				var userId = uni.getStorageSync('userId')
				var userName = uni.getStorageSync('userName')
				var pageName = that.pageName
				var templetName = that.templetName
				var modid = that.modid 
				var menuid = that.menuid
				var divArea = that.divArea
				
				
				var datastyle = that.datastyle
				
				
				
				var injson2 = '{"productCode":"' + productCode + '","terminalType":"' + terminaltype + '","projectCode":"' +
					projectCode + '","dbId":"' + dbId + '","templetName":"' + templetName + '","pageName":"' + pageName +
					'","menuId":"'+menuid+'","modId":"' + modid + '","sessionId":"' + sessionId + '","userId":"' + userId +
					'","userName":"' + userName + '","divArea":"' + divArea + '","colName":"' + that.colName + '","childDataObject":"' + that.childDataObject + 
					'" ,"filterConditions":' + JSON.stringify(that.filterConditions) + ',"conditions":' + JSON.stringify(that.conditions) + ',"pageConditions":' + JSON.stringify(pageConditions) + '}';
				console.log(injson2)
				
				uni.request({
					url: getApp().globalData.app_address + '?method=saas_PageDivChildData&parse=json',
					data: injson2,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						var result = res.data;
						console.log(result)
						
						var datalisttemp = result.data.div.value
						if(JSON.stringify(datalisttemp) != '[]' && datalisttemp.length >= pageConditions.rowsPerPage){
							pageConditions.pageNumber += 1
							that.pageConditions = pageConditions
						}else{
							pageConditions.pageNumber = 0
							that.pageConditions = JSON.parse(JSON.stringify(pageConditions)) 
						}
						var datalist = that.datalist
						var DataObjectExtData = uni.getStorageSync('DataObjectExtData')
						for(var k=0; k<datalisttemp.length; k++){
							for(var m=0; m<datastyle.length; m++){
								datastyle[m].style['value'] = datalisttemp[k][datastyle[m].name]
								datastyle[m].style['colValue'] = datalisttemp[k][datastyle[m].name]
								if( datastyle[m].style.editStyle == 'dddw'){
									for(var o=0; o<DataObjectExtData.length;o++){
										if(DataObjectExtData[o].dataobjectname == datastyle[m].style.tag_dddwName && DataObjectExtData[o].coldata == datastyle[m].style.value){
											datastyle[m].style.colValue = DataObjectExtData[o].coldisplay
										}
										
									}
								}else if(datastyle[m].style.editStyle == 'ddlb'){
									var codeTable = datastyle[m].style.codeTable
									for(var o=0; o<codeTable.length;o++){
										for(var p=0;p<datastyle.length;p++){
											if(codeTable[o].dataValue == datastyle[m].style.value){
												datastyle[m].style.colValue = codeTable[o].displayValue
											}
										}
									}
								}
							}
							
							
							datalist.push(JSON.parse(JSON.stringify(datastyle)) )
						}
						that.datalist = datalist	
						that.isloading = true
					},
				})
				
			}
		},
		
		inputheadblur(index, event){
			var that = this
			var filterConditions = that.filterConditions
			filterConditions[0].value = event.detail.value
			that.filterConditions = filterConditions
			
			console.log(that.filterConditions)
			
			var productCode = uni.getStorageSync('productCode')
			var sessionId = uni.getStorageSync('sessionId')
			var projectCode = uni.getStorageSync('projectCode')
			var terminaltype = uni.getStorageSync('terminaltype')
			var dbId = uni.getStorageSync('dbId')
			var userId = uni.getStorageSync('userId')
			var userName = uni.getStorageSync('userName')
			var pageName = that.pageName
			var templetName = that.templetName
			var modid = that.modid 
			var menuid = that.menuid
			var divArea = that.divArea
			
			
			var datastyle = that.datastyle
			
			var pageConditions = that.pageConditions
			pageConditions.pageNumber = 1
			
			
			
			var injson2 = '{"productCode":"' + productCode + '","terminalType":"' + terminaltype + '","projectCode":"' +
				projectCode + '","dbId":"' + dbId + '","templetName":"' + templetName + '","pageName":"' + pageName +
				'","menuId":"'+menuid+'","modId":"' + modid + '","sessionId":"' + sessionId + '","userId":"' + userId +
				'","userName":"' + userName + '","divArea":"' + divArea + '","colName":"' + that.colName + '","childDataObject":"' + that.childDataObject + 
				'" ,"filterConditions":' + JSON.stringify(that.filterConditions) + ',"conditions":' + JSON.stringify(that.conditions) + ',"pageConditions":' + JSON.stringify(pageConditions) + '}';
			console.log(injson2)
			
			uni.request({
				url: getApp().globalData.app_address + '?method=saas_PageDivChildData&parse=json',
				data: injson2,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: function(res) {
					var result = res.data;
					console.log(result)
					
					var datalisttemp = result.data.div.value
					if(JSON.stringify(datalisttemp) != '[]' && datalisttemp.length >= pageConditions.rowsPerPage){
						pageConditions.pageNumber += 1
						that.pageConditions = pageConditions
					}else{
						pageConditions.pageNumber = 0
						that.pageConditions = pageConditions
					}
					var datalist = []
					var DataObjectExtData = uni.getStorageSync('DataObjectExtData')
					
					for(var k=0; k<datalisttemp.length; k++){
						for(var m=0; m<datastyle.length; m++){
							datastyle[m].style['value'] = datalisttemp[k][datastyle[m].name]
							
						}
						
						for(var o=0; o<DataObjectExtData.length;o++){
							for(var p=0;p<datastyle.length;p++){
								if(DataObjectExtData[o].dataobjectname == datastyle[p].style.tag_dddwName && DataObjectExtData[o].coldata == datastyle[p].style.value){
									datastyle[p].style.colValue = DataObjectExtData[o].coldisplay
								}
							}
						}
						datalist.push(JSON.parse(JSON.stringify(datastyle)) )
					}
					that.datalist = datalist	
				},
			})
		}
	}
}
</script>

<style>
	.main-view{width: 100vw;height: 100vh;background-color: #f0f0f0;}
	.bottom-wrapper{background-color: #fff; height: 40px; width: 100vw;display: flex;flex-direction: row;justify-content: space-between;position: absolute;bottom: 0;align-items: center;z-index:200}
	.bottom-view{display: flex;height: 100%;margin-bottom: 10px;justify-content: center;}
	.bottom-btn{margin-left: 5vw; width: 90vw; border-radius: 10px; align-items: center; display: flex;justify-content: center;height: 100%; background-color: #F55C23;color: #fff;}
	.content-view{}
	.error-view{display: flex;color: #aaa;justify-content: center;flex-direction: column;align-items: center;}
</style>